<template>
  <!-- 地图部分 -->
  <el-row>
    <el-col :span="18">
      <div id="container"></div>
      <!-- <div>
        <label>图层透明度：</label>
        <span id="opa-val">-</span>
        <br>
        <input
          id="opacity"
          type="range"
          value="0.6"
          min="0"
          max="1"
          step="0.01"
          oninput="setOpacity(this.value)"
          onchange="setOpacity(this.value)"
        >
      </div>-->
    </el-col>

    <el-col :span="6">
      <!-- 卡片头部 -->
      <el-card class="box-card station_card">
        <div slot="header" class="clearfix">
          <span>站点</span>
        </div>
        <!-- 下拉菜单 -->
        <el-menu
          :default-openeds="opdneds"
          unique-opened
          class="el-menu-vertical-demo el-marker-active"
        >
          <el-submenu :key="k" :lll="k" v-for="(item,k) in a_station" :index="k + ''">
            {{item.lng}}
            <template slot="title">
              <!-- <i class="el-icon-location"></i> -->
              <span>{{ item.station.name }}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item
                v-for="(item2,k2) in item.collectorSingles"
                :key="k2"
                :index="item.station.id+''+item2.id"
                :class="'li_id_'+item2.id"
                @click="dialog_menu_item(item2)"
              >
                <span>{{ item2.name }}</span>
                <strong>
                  电量：
                  <span :style="{color:item2.battery<30?'red':'#33CC66'}">{{item2.battery}}%</span>
                </strong>
                <strong>电压：{{item2.voltage}}V</strong>
                <img width="18" height="18" :src="item2.icon_i" alt>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-card>

      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>统计</span>
        </div>
        <div class="Statistics">
          <p>
            在线数量:
            <span>{{ online_num }}</span>
          </p>

          <p>
            通讯正常:
            <span>{{warning_num}}</span>
          </p>
        </div>
      </el-card>
    </el-col>
    <!-- 弹出层marker 根据data里边的数据取值 -->
    <el-dialog
      class="ss_dl_dialog"
      @closed="clear_class"
      :title="now_detail_data.name"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <p class="up_time">更新时间 : {{ ele_time_up }}</p>
      <div>
        <img class="img_icon" :src="now_detail_data.icon" alt="该气象站暂无信息可查">
      </div>
      <div class="dialog_p">
        <p v-for="(item,k) in dialog_data.labels" :key="item.elementId+''+k">
          <span>{{ item.elementName }}:</span>
          <strong>{{ dialog_data.datas[0][item.elementSort] }} {{item.elementUnit}}</strong>
        </p>
      </div>
      <strong v-show="clicka_all_lock" ref="click_all" class="click_all" @click="clicka_all">点击展开全部</strong>
      <span slot="footer" class="dialog-footer">
        <el-row justify="space-around" type="flex">
          <el-button type="primary" @click="query_pivot">历史数据查询</el-button>
          <el-button type="primary" @click="data_visualization">曲线分析</el-button>
        </el-row>

        <!-- <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>-->
      </span>
    </el-dialog>
  </el-row>
</template>



  <script
    type="text/javascript"
    src="https://cache.amap.com/lbs/static/addToolbar.js"
  ></script>
<script>
export default {
  created() {
    //
  },
  mounted() {
    this.get_station();
    // 只让自适应marker在生命周期中执行一次，否自无法执行聚焦经纬度
    var _this = this;
    // setTimeout(() => {
    //   _this.map.setFitView();
    // }, 1200);
  },
  data() {
    return {
      // 点击要展开那个父菜单列表，
      opdneds: [""],
      // 搜索内容
      serch: "",
      user_info: this.$store.state.user_info.data,
      // 站点数组
      a_station: [],
      // 气象站详情
      detail_station: [],
      // markerid数组
      _amap_id: [],
      // 默认显示的子级菜单
      num: 0,
      // 管理弹出层的开光
      dialogVisible: false,
      // 弹出层使用的前六条数据
      dialog_data_6: [],
      // 弹出层使用的数据
      dialog_data: {
        datas: [{ update_time: "" }]
      },
      // 当前点击的气象站的信息
      now_detail_data: {},
      // 控制显示几条数量
      data_lock: 2,
      // 点击展开全部
      // 当前点击的气象站id
      obj_id: "HCD719032301",
      // 点击显示全部按钮的显示
      clicka_all_lock: true,
      // 当前的气象站对象
      // 默认经纬度
      lat: 36.607894,
      lng: 114.430009,
      // 缩放级别
      zoom: 10,
      // 在线设备数量
      online_num: 0,
      // 报警设备数量
      warning_num: 0,
      // 设备掉线数量
      lost_num: 0,
      // 地图实例
      map: {},
      // 测试marker幅度
      // num: 0,
      // 锁住自适应marker
      marker_lock: true,
      // 元素获取更新时间
      ele_time_up: ""
    };
  },
  methods: {
    // 点击跳到数据可视化页面
    data_visualization() {
      this.$router.push("/data_visualization/" + this.obj_id);
    },
    // 点击跳转到数据查询的页面
    query_pivot() {
      this.$router.push("/query_pivot/" + this.obj_id);
      //
    },
    // 关闭对话框时的清除类名操作
    clear_class() {
      document
        .querySelector(".el-dialog__body")
        .classList.remove("dialog__body_l");
      document.querySelector(".el-dialog").classList.remove("dialog_l");
      //  document.querySelectorAll(".el-menu-item")
    },
    // 列表点击事件
    dialog_menu_item(obj) {
      // 点击弹出对话框后
      this.box_alert(obj);
      // 改变经纬度，需要在初始化执行一次地图方法
      this.lat = obj.lat;
      this.lng = obj.lng;
      // 更换气象站时 获取当地天气
      // this.$emit("list_click", obj);
      // this.$parent.s_city_Change();
      this.$store.commit("weather_obj", obj);

      // 控制缩放级别显示到当前的气象站点
      this.zoom = 10;
      // 初始化地图
      this.init_map();
    },
    // 点击加载更多按钮
    async clicka_all() {
      var { data: res } = await this.$http.get(
        `/data/realtimeSingle/${this.obj_id}`
      );

      this.dialog_data = res;
      this.clicka_all_lock = false;
      document
        .querySelector(".el-dialog__body")
        .classList.add("dialog__body_l");
      document.querySelector(".el-dialog").classList.add("dialog_l");
      //
    },
    // 点击marker弹出层
    async box_alert(obj) {
      //
      this.$store.commit("weather_obj", obj);

      // 控制缩放级别显示到当前的气象站点
      this.zoom = 14;

      // 显示点击显示全部按钮
      this.clicka_all_lock = true;

      // 发送ajax
      var { data: res } = await this.$http.get(
        `/data/realtimeSingle/${obj.serial}`
      );
      // if (res.status == 7) return this.$message.warning(res.msg);

      // 保存当前要获取的气象站的id
      this.obj_id = obj.serial;
      // 开启对话框
      this.dialogVisible = true;
      // 将返回的数据提供给页面使用
      this.dialog_data = res;

      // 当前元素更新的时间
      this.now_detail_data = obj;
      this.ele_time_up = this.dialog_data.datas[0].update_time;

      if (res.status != 0) {
        return this.$notify.warning(res.msg);
      }

      // for (var i = 0; i <= this.data_lock; i++) {
      // this.dialog_data_6.push(this.dialog_data[i]);
      // 一开始只显示6条数据，点击之后再显示全部
      // 保存当前点击的气象站对象

      this.dialog_data.labels = this.dialog_data.labels.slice(0, 6);
      // }

      //
    },

    // 根据login的用户信息 发送ajax获取站点信息
    async get_station() {
      var { data: res } = await this.$http(
        "/station/listStationsAndCollectorSingle/" + this.user_info.id
      );

      this.a_station = res.datas;

      var war_station = [];
      this.a_station.forEach((item, index) => {
        item.collectorSingles.forEach((item2, index) => {
          // 将报警的气象站提交到state，给home使用
          if (item2.flag == "02") {
            war_station.push(item2);
          }
          // 渲染时要加上require 先载入图片否则不有请求发出去
          item2.icon_i = require("../assets/img/line" + item2.flag + ".png");
          item2.f_id = item.station.id;

          this.detail_station.push(item2);
        });
      });
      this.$store.commit("warning", war_station);
      //

      // this.$store.commit("kid_station", this.detail_station);

      this.online_num = res.onLineNum;
      this.warning_num = res.totalNum;
      // this.lost_num = arr3.length;
      //

      // arr = null;
      // arr2 = null;
      // arr3 = null;
      this.init_map();
    },
    async init_map() {
      // var googleLayer = new AMap.TileLayer({
      //   getTileUrl:
      //     "http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
      // }); //定义谷歌卫星切片图层

      // var roadNetLayer = new AMap.TileLayer.RoadNet(); //定义一个路网图层

      // var imageLayer = new AMap.ImageLayer({
      //   // url:
      //   //   "http://amappc.cn-hangzhou.oss-pub.aliyun-inc.com/lbs/static/img/dongwuyuan.jpg",
      //   // url: "file://C:/Users/Administrator/Desktop/l1.png",
      //   bounds: new AMap.Bounds(
      //     [125.01057, 44.527368], //左下角
      //     [125.015291, 44.53055] //右上角
      //   ),

      //   zooms: [10, 18]
      // });
      // //设置透明度
      // imageLayer.setOpacity(0.5);
      var that = this;
      var map = new AMap.Map("container", {
        //center: [114.479347,36.536979], //邯郸
        // center: [116.408967, 39.880101],
        center: [that.lng, that.lat], //吉林省农安县万顺乡农家堰
        // center: [105.606322, 30.154596], //红蜻蜓
        zoom: that.zoom, //设置缩放级别
        // layers: [googleLayer, roadNetLayer, imageLayer], //设置图层
        zooms: [1, 23],
        showLabel: true,
        pitch: 55,
        forceVector: false,
        resizeEnable: true,
        expandZoomRange: true
      });
      this.map = map;

      // map.plugin(["AMap.Scale"], function() {
      //   var scale = new AMap.Scale();
      //   map.addControl(scale);
      // });

      // marker位置
      var markers = (lat, lng, name, id, flag, obj) => {
        const icon = new AMap.Icon({
          size: new AMap.Size(40, 30),
          image: require(`../assets/img/${flag}.png`),
          imageSize: new AMap.Size(38, 33),
          anchor: "center"
          // offset: new AMap.Pixel(-19, -16) // 设置点标记偏移量
        });
        var marker = new AMap.Marker({
          position: new AMap.LngLat(lat, lng),
          // offset: new AMap.Pixel(-10, -10),
          icon: icon, // 添加 Icon 图标 URL
          // icon: "../assets/img/marker.png",
          title: name,
          offset: new AMap.Pixel(-18, -30) //设置偏移量
          // anchor: "center"
        });
        var _this = this;
        marker.on("click", function(e) {
          var id = e.target.id;

          var list = document.querySelectorAll(".el-menu-item");
          for (var j = 0; j < list.length; j++) {
            list[j].classList.remove("is-active");
          }

          var li = document.querySelector(`.li_id_${id}`);
          var li_f = li.parentNode.parentNode.parentNode.parentNode;
          var k = li_f.getAttribute("lll");
          //
          // 单纯修改 不会对试图更新做出变化，
          _this.opdneds[0] = k + "";
          // 实际上就是内存地址的原因
          _this.opdneds = [..._this.opdneds];

          //

          li.classList.add("is-active");

          //

          _this.box_alert(obj);
        });
        //
        marker.id = id;

        return marker;
      };
      // 循环创建数组里边等同数量的marker
      // var num = 0.1;

      for (var i = 0; i < this.detail_station.length; i++) {
        // num = num + 0.1;

        var a = markers(
          this.detail_station[i].lng,
          this.detail_station[i].lat,
          this.detail_station[i].name,
          this.detail_station[i].id,
          this.detail_station[i].flag,
          this.detail_station[i]
        );
        //

        map.add(a);
      }
      // var b = markers(
      //   116.397531,
      //   39.906924,
      //   this.detail_station[0].name,
      //   this.detail_station[0].id,
      //   this.detail_station[0].flag,
      //   this.detail_station[0]
      // );
      // map.add(b);
      // =============================>

      //区域1

      //绘图区域点击后要执行的方法：弹出信息
      var info;
      // 找到地图上的所有marker，并自适应显示出来
      if (this.marker_lock) {
        // 点击ment_item的时候会重新实例化地图对象，setfitview在执行的时候会把所有标识再次自适应，不会聚焦了
        // 所以我们自断后路，让他在页面加载的时候只执行一次
        map.setFitView();
        this.marker_lock = false;
        //
      }
      function openInfo(e) {
        var infoWindow = {};
        infoWindow = new AMap.InfoWindow({
          content: info.join("") //使用默认信息窗体框样式，显示信息内容
        });
        //

        infoWindow.open(map, [e.lnglat.getLng(), e.lnglat.getLat()]);
        document.getElementById("lnglat").value =
          e.lnglat.getLng() + "," + e.lnglat.getLat();
      }
    }
  }
};
</script>

<style lang="less" scoped>
.up_time {
  position: absolute;
  right: 60px;
  top: 20px;
  color: #fff;
}

.el-card__body {
  overflow: auto;
}
// 点击展开全部
.click_all {
  cursor: pointer;
  margin-top: 20px;
  &:hover {
    color: #409eff;
  }
}
// 弹出盒子的p样式
.dialog_p {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  p {
    width: 50%;
    line-height: 34px;
    // flex: 1;
  }
}
// 弹出图片样式
.img_icon {
  width: 100%;
  height: 100%;
  max-height: 250px;
}
.station_card {
  height: 80%;
}
// 一行span样式
.el-menu-item span {
  // display: inline-block;
  max-width: 80px;
  width: 100%;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
  text-overflow: ellipsis;
}
// 地图
.amap-marker-label {
  width: 60px;
  font-size: 16px;
  line-height: 18px;
  text-align: center;
  height: 18px;
  font-family: STLiti;
  color: green;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, 0.4);
  border: solid 2px rgba(100, 255, 200, 0.8);
}

.el-container {
  height: 100%;
}

// 主体样式
.el-main {
  // position: relative;
  background-color: lightseagreen;
  padding: 20px;
  overflow: hidden;

  height: 100%;
  #container {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
    }
  }
}

// 统计
.Statistics {
  p {
    padding: 0px 20px;
    line-height: 30px;
    font-size: 14px;
    color: #616469;
  }
}
</style>